<template>
  <input type="text"
         v-model="todoValue"
         @keyup='setTodoValue'>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
import { useTodo, IUseTodo } from '../hooks'
export default defineComponent({
  name: 'TodoInput',
  emits: [],
  mounted() {},
  setup(props, { attrs, slots, emit }) {
    const todoValue = ref<string>('')
    const { setTodo }: IUseTodo = useTodo()
    const setTodoValue = (e: KeyboardEvent): void => {
      if (e.key === 'Enter' && todoValue.value.trim().length) {
        setTodo(todoValue.value)
        todoValue.value = ''
      }
    }
    return {
      todoValue,
      setTodoValue,
    }
  },
})
</script>
<style scoped lang='scss'>
</style>